<template>
  <div class="container">
    <span style="font-size: 30px;">404</span>
    <span>{{ time }}后自动跳转到首页</span>
    <router-link to="/">
      点此返回首页
    </router-link>
  </div>
</template>

<script setup>
import router from '@/router'

const time = ref(300)
let timer

onMounted(() => {
  timer = setInterval(() => {
    if (time.value === 1) {
      clearInterval(timer)
      router.push('/')
    } else {
      time.value--
    }
  }, 1000)
})

onBeforeUnmount(() => {
  // timer && clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

a {
  color: #1e80ff;
}
</style>
